<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
			<hx-navbar title="提现" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto">
			</hx-navbar>
			<view class="content-top">
				<view class="top" :style="{'background':ktabbarBgColor,'color':knormalColor}">
					<view class="top_left">选择提现银行卡</view>
					<view class="top_right" @click="showBankPopup()">
						<view class="right_title" v-if="bankName==''">选择银行卡</view>
						<view class="right_title" v-if="bankName!=''">{{bankName}}</view>
						<uni-icons type="right" :color="knormalColor" size="20"></uni-icons>
					</view>
				</view>
				<!-- 提现部分 -->
				<view class="box" :style="{'background':ktabbarBgColor,'color':knormalColor}">
					<view class="box_title">提现金额</view>
					<view class="box_input">
						<text class="box_symbol">￥</text>
						<input type="number" v-model="money" class="box_symbol" :placeholder="placeholder" />
					</view>
					<view class="box_footer" v-if="freezeAmount !='0.00'">
						冻结金额{{freezeAmount || ''}}元,
						<view :style="{'color':kselectColorSize}" @tap="all_num">查看原因</view>
					</view>
					<view class="box_footer" v-show="isError">提现金额超过可用余额</view>
				</view>
				<view class="note">
					<text>提现须知：</text>
					<text>1.单笔最低提现金额为100元</text>
					<text>2.单笔最高提现金额为10000元</text>
					<text>3.每日提现次数限制{{payInfo.extractQuantity}}次</text>
					<text>4.单笔提现将收取手续费{{ (payInfo.feePercentage * 1).toFixed(0) + '%' }}</text>
					<text>5.预计提现T+1到账（下个工作日到账）</text>
				</view>
			</view>

			<view class="bottom_box">
				<view class="submit_btn" :style="{'background':kbuttonBgColor}" v-if="isSubmit" @click="withdrawCash()"
					disabled='submitStatus' :loading='submitStatus'>
					立即提现
				</view>
				<view class=" submit_btn2" v-else-if="!isSubmit" disabled>
					立即提现
				</view>
			</view>

			<!-- 官方旗舰店 -->
			<uni-popup ref="bankPopup" type="bottom" :maskBackgroundColor="'rgba(0,0,0,0.3)'">
				<view class="bank-view" :style="{'background':ktabbarBgColor,color:knormalColor}">
					<view style="overflow-y: auto;max-height:820rpx;text-align: center;margin-top: 30rpx">
						<text class="title">选择银行卡</text>
						<view class="bank-item" v-for="(item,index) in bankList">
							<image class="bank-image"
								:src="'https://apimg.alipay.com/combo.png?d=cashier&t='+cardLogo[index]"></image>
							<text class="bank-title">{{item.bankName}} ({{item.cardNumber.slice(-4)}})
								<text style="margin-left: 15rpx;" :style="{color:kselectColorSize}"
									v-if="item.tacit==2 && purseCardId==item.id ">默认</text>
							</text>
							<view class="bank-tag" @click="selectBank(item)">
								<uni-icons v-if="item.radio" type="checkbox-filled" :color="kselectColorSize"
									size="24"></uni-icons>
								<uni-icons v-if="!item.radio" type="checkbox" :color="knormalColor"
									size="24"></uni-icons>
							</view>
						</view>
						<view class="bank-item" @click="addBank()" style="margin-top: 10rpx;">
							<view class="bank-image" style="margin-top: -10rpx;margin-left: -2rpx;">
								<uni-icons type="plus-filled" :color="knormalColor" size="30"></uni-icons>
							</view>
							<text class="bank-title">添加其他银行卡</text>
							<view class="bank-tag">
								<uni-icons type="right" :color="knormalColor" size="24"></uni-icons>
							</view>
						</view>
						<view class="bottom_box">
							<view class="submit_btn" :style="{'background':kbuttonBgColor}" @click="selectFinish()">
								确认
							</view>
						</view>

					</view>
				</view>
			</uni-popup>
			<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提示</text>
					<text class="popup-subtitle">确认现在提现吗</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="bindingClose()">放弃提现</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">确认提现
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 提示 -->
			<uni-popup ref="tiPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提示</text>
					<text class="popup-subtitle">
						{{hintMess}}
					</text>

				</view>
			</uni-popup>
			<!-- 冻结 -->
			<uni-popup ref="tiFreezePopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<view class="popup-title">冻结金额
						<view class="" style="font-size: 32rpx;margin: 10rpx auto;">￥{{freezeAmount}}</view>
					</view>

					<text class="popup-subtitle">
						该部分金额已提交提现申请，暂不可用
					</text>
					<view style="text-align: center;margin: 20rpx 0 40rpx 0;font-size: 30rpx;"
						:style="{color:ktopicAdaptationColors}" @click="bindingClose()">知道了</view>

				</view>
			</uni-popup>
			<paypass ref="passbox" @confirm="set_done"></paypass>
		</view>
	</view>
</template>

<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				payInfo: {},
				freezeAmount: "",
				balanceVal: "",
				placeholder: "",
				hintMess: '',
				purseCardId: '',
				cardInfo: {}, // 我的银行卡信息
				user: {}, // 用户信息
				isError: false, // 当提现金额大于可用余额 显示错误提示
				isAstrict: false, // 当提现金额大于可用余额 显示错误提示
				isSubmit: false, // 提现点击
				money: '', // 用户输入的提现金额
				submitStatus: false,

				type_list: [{
					id: 1,
					name: '银行卡',
					type: 1
				}, ],
				type_index: 0,
				cardLogo: [],
				bankList: [],
				bankName: '',
				mrdataList: []

			}
		},
		onLoad() {

		},
		onShow() {
			// this.userBankCard()
			this.cardLogo = []
			this.userInfo()
			this.getCardList()

			// #ifdef MP-ALIPAY || MP-TOUTIAO
			let user_card_info = this.$db.get('user_card_info', true);
			if (user_card_info) {
				this.cardInfo = user_card_info;
				this.$db.del('user_card_info', true);
			}
			// #endif
		},
		computed: {
			// userbankCard() {
			// 	if (Object.keys(this.cardInfo).length) {
			// 		return true
			// 	} else {
			// 		return false
			// 	}
			// },
			// 店铺提现手续费
			tocashMoneyRate() {
				return this.$store.state.config.tocash_money_rate
			},
			// 店铺提现最低金额
			tocashMoneyLow() {
				return this.$store.state.config.tocash_money_low
			},
			// 提现文字说明
			tocashExplain() {
				if (this.tocashMoneyRate && this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元（收取 ' + this.tocashMoneyRate + ' %服务费）'
				} else if (this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元'
				} else if (this.tocashMoneyRate) {
					return '收取 ' + this.tocashMoneyRate + ' %服务费'
				} else {
					return ''
				}
			}
		},
		methods: {
			all_num() {
				this.$refs.tiFreezePopup.open()
			},
			getCardLogo(code) {
				console.log("银行code--", code);
				//获取银行logo
				let token = this.$db.get('userToken')
				uni.request({
					url: '/api/combo.png?d=cashier&t=' + code, //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						// this.cardLogo.push(res.data)
						//     this.text = 'request success';
					}
				});
			},
			getCardList() {
				this.$api.getPurseConfig(res => {
					if (res.status) {
						this.payInfo = res.data
					}
				})

				//余额显示
				this.$api.pursedetailId(res => {
					if (res.status) {
						this.balanceVal = res.data.balance
						this.placeholder = '可提现' + this.balanceVal + '元'
						this.freezeAmount = res.data.freezeAmount
					} else {
						this.$common.errorToShow(res.message)
					}

				})

				this.$api.purseCardLsit(res => {
					if (res.status) {
						this.bankList = res.data.list

						this.bankList.forEach((val, index) => {
							this.cardLogo.push(val.bankCode)
							// this.getCardLogo(val.bankCode)
						})
						let foundBank = this.bankList.find(val => val.tacit === 2);
						if (foundBank) {
							this.bankName = foundBank.bankName;
							foundBank.radio = true;
							this.purseCardId = foundBank.id

						}

					} else {
						this.$common.errorToShow(res.message)
					}

				})
				// this.mrdataList.forEach((bank, index) => {  
				// 	 if(index==0){
				// 		 this.bankName =bank.bankName
				// 		 bank.radio = true
				// 	 }

				// 	 console.log('最后一个银行:', this.bankName);



				//   })
			},
			addBank() {
				uni.navigateTo({
					url: '/pages/user/wallet/add-bankcard'
				})
			},
			showBankPopup() {
				this.$refs.bankPopup.open()
			},
			selectBank(obj) {
				this.bankList.forEach(item => {
					item.radio = false
				})
				this.bankList.forEach(item => {
					if (obj.id == item.id) {
						item.radio = true
					}
				})
			},
			selectFinish() {
				this.bankList.forEach(item => {

					if (item.radio) {
						this.bankName = item.bankName
						this.purseCardId = item.id
					}
				})
				this.$refs.bankPopup.close()
			},
			bindingClose() {
				this.$refs.tiFreezePopup.close()
				this.$refs.bindingDialog.close()
			},
			bindingCheck() {

				this.$api.checkSecondPassword({}, res => {
					if (res.status) {
						let data = res.data
						if (data.secondPassword) {
							this.$refs.passbox.open();
						} else {
							this.$common.errorToShow('请设置交易密码', () => {
								uni.navigateTo({
									url: '/pages/user/settings/pay_pass/pay_pass'
								})
							});
						}
					} else {
						this.$common.errorToShow('网络异常');
					}
				})

				this.$refs.bindingDialog.close()
			},
			withdrawCash() {
				if (this.bankName == '') {
					this.hintMess = '请选择银行卡'
					this.$refs.tiPopup.open()
				} else if (Number(this.money) > 10000 || Number(this.money) < 100) {
					this.isAstrict = true
					this.isSubmit = false
					this.hintMess = "1.单笔最低提现金额为100元\n2.单笔最高提现金额为10000元";
					this.$refs.tiPopup.open()
				} else {
					this.$refs.bindingDialog.open()
				}

			},
			set_done: function(pass) {
				var data = {
					secondPassword: pass,
					amount: this.money,
					purseCardId: this.purseCardId
				}
				this.$api.purseSaveExtract(data, res => {
					if (res.status) {
						this.hintMess = '提现提交成功，待审核后将会提现到银行卡中'
						this.$refs.tiPopup.open()
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/user/wallet_system/pay_detail'
							})
						}, 4000)
					} else {
						this.$common.errorToShow(res.message)
					}

				})

			},
			// 获取我的默认银行卡信息
			userBankCard() {
				this.$api.getDefaultBankCard({}, res => {
					if (res.status) {
						this.cardInfo = res.data
					}
				})
			},
			// 获取用户信息
			userInfo() {
				// 获取我的余额信息
				// 获取用户的可用余额
				this.$api.userInfo({}, res => {
					this.user = res.data
				})
			},
			// 去提现
			toCash() {
				if (!this.money) {
					this.$common.errorToShow('请输入要提现的金额')
					return false
				} else if (Number(this.money) === 0) {
					this.$common.errorToShow('提现金额不能为0')
				} else if (this.type_index == -1) {
					this.$common.errorToShow('选择提现方式')
				} else {
					this.submitStatus = true;
					this.$api.userToCash({
						money: this.money,
						cardId: this.cardInfo.id,
						type: this.type_list[this.type_index].type

					}, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							})
						} else {
							if (res.data == 11016) {
								uni.navigateTo({
									url: '/pages/user/settings/bank/bank'
								})
							}
							if (res.data == 110161) {
								uni.navigateTo({
									url: '/pages/user/settings/wechat/wechat?type=4'
								})
							}
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
		},
		watch: {
			money() {
				// 比较用户的输入金额 如果大于可用金额
				if (this.money === '' || Number(this.money) <= 0) {
					this.isSubmit = false
				} else if (Number(this.money) > Number(this.balanceVal)) {
					this.isError = true
					this.isSubmit = false
				} else if (Number(this.money) < Number(this.tocashMoneyLow)) {
					this.isError = false
					this.isSubmit = false
				} else {
					this.isError = false
					this.isSubmit = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
	}

	.content-top {
		position: relative;
		width: 100%;
		padding: 30rpx 30rpx 0 30rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 35rpx;
		border-radius: 20rpx;

		.top_left {
			font-size: 28rpx;
		}

		.top_right {
			display: flex;
			flex-direction: row;

			.right_title {
				font-size: 28rpx;
			}
		}
	}

	.note {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #8E8E8E;
		margin-top: 30rpx;

		.note_symbol {
			color: #EC5D29;
			margin-right: 10rpx;
		}
	}

	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.box_title {
		padding: 30rpx 0;
		padding-left: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.box_input {
		margin: 20rpx 0;
		display: flex;
		align-items: center;

		.box_symbol {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.box_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 10rpx;
		font-size: 24rpx;
		height: 93rpx;
		border-top: 1rpx solid #898989;
		margin-top: 10rpx;
		color: #8E8E8E;
	}

	.bottom_box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 50rpx;
		width: 100%;

		.submit_btn {
			width: 280rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: white;
			text-align: center;
			border-radius: 50rpx;
		}

		.submit_btn2 {
			width: 280rpx;
			height: 88rpx;
			border: 1rpx solid #d9d9d9;
			color: #999;
			line-height: 88rpx;
			text-align: center;
			border-radius: 50rpx;
		}
	}

	.bank-view {

		display: flex;
		flex-direction: column;
		margin-bottom: -6rpx;
		min-height: 1000rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;

		.title {
			width: 100%;
			font-size: 30rpx;
			margin-top: 40rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.bank-item {
			padding: 0rpx 60rpx 0 60rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.bank-image {
				width: 80rpx;
				height: 40rpx;
			}

			.bank-title {
				font-size: 28rpx;
				margin-left: 20rpx;
			}

			.bank-tag {
				width: 80rpx;
				height: 80rpx;
				font-size: 24rpx;
				margin-top: 6rpx;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					margin-left: 12rpx;
					margin-top: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>